<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        body {
            background-color: black;
        }
        
        .hero {
            display: block;
            margin: 0 auto;
            padding: 0px;
            font-size: 16px;
            width: 400px;
            height: 36px;
            border-radius: 18px;
            outline: none;
            border: 1px solid #593f08;
            text-indent: 15px;
            background-color: rgba(89, 63, 8, 0.4);
            color: #d0b886;
        }
        
        .bg {
            width: 1144px;
            height: 635px;
            margin: 10px auto;
            background: url('images/yangpi_bg02.png') no-repeat;
        }
        
        .bg .left {
            width: 450px;
            height: 580px;
            float: left;
            margin-left: 56px;
            position: relative;
        }
        
        .left span {
            color: white;
        }
        
        .name_con {
            margin-top: 305px;
            font-size: 16px;
            color: #593f08;
            font-family: '楷体';
            font-weight: bold;
            line-height: 29px;
        }
        
        .showname {
            position: absolute;
            left: 100px;
            top: 131px;
            width: 240px;
            line-height: 60px;
            text-align: center;
            font-size: 30px;
            color: #593f08;
            font-weight: bold;
        }
        
        .left .name {
            font-size: 16px;
            color: #593f08;
            font-family: '楷体';
            font-weight: bold;
            line-height: 29px;
        }
        
        .title_con {
            font-size: 16px;
            color: #593f08;
            font-family: '楷体';
            font-weight: bold;
            line-height: 29px;
        }
        
        .left .title {
            font-size: 16px;
            color: #593f08;
            font-family: '楷体';
            font-weight: bold;
            line-height: 29px;
        }
        
        .story_con {
            margin: 0px;
            font-size: 16px;
            color: #593f08;
            font-family: '楷体';
            font-weight: bold;
            line-height: 29px;
            width: 460px;
            height: 200px;
            overflow: auto;
        }
        
        .left .story {
            font-size: 16px;
            color: #593f08;
            font-family: '楷体';
            font-weight: bold;
            line-height: 29px;
        }
        
        .right {
            width: 547px;
            height: 560px;
            float: right;
            margin: 32px 42px 0 0;
            border: 2px solid #593f08;
            /* 这是右边盒子的背景图 */
            background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201211%2F04%2F20121104194249_nzJij.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621064834&t=b9435c94198c4c751be0038384481748);
            background-position: right top;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <input type="text" class="hero" placeholder="输入英雄按下回车查询" />

    <div class="bg">
        <div class="left">
            <!-- 下面的信息是根据服务端响应的数据进行生成的 -->
            <div class="showname">提莫</div>
            <div class="name_con">
                <div class="name">名称：提莫</div>
            </div>
            <div class="title_con">
                <div class="title">外号：迅捷斥候</div>
            </div>
            <div class="story_con">
                <div class="story">
                    简介: Teemo还有个隐藏被动技能，就是长了个全球嘲讽脸。每 次团战必然会被敌方坦克和刺客类英雄集火，你的工作就是要用 蘑菇风筝每一个攻击你的人，保持活着，有可能的话顺便杀个人。
                </div>
            </div>

        </div>

        <div class="right">

        </div>

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // let input = document.querySelector('.hero')
        // input.addEventListener('keyup', function(e) {
        //     if (e.key == 'Enter') {
        //         let xhr = new XMLHttpRequest()
        //         xhr.onreadystatechange = function() {
        //             if (xhr.readyState == 4 && (xhr.status >= 200 || xhr.status < 300)) {
        //                 let hero = JSON.parse(xhr.responseText)
        //                 $('.showname')[0].innerHTML = hero.name
        //                 $('.name')[0].innerHTML = `名称：${hero.name}`
        //                 $('.title')[0].innerHTML = `外号：${hero.title}`
        //                 $('.story')[0].innerHTML = hero.story
        //                 $('.right')[0].style.backgroundImage = `url(${hero.bg})`
        //             }
        //         }
        //         xhr.open('get', `https://autumnfish.cn/api/hero/info?name=${input.value}`)
        //         xhr.send()
        //     }
        // })

        // let input = document.querySelector('.hero')
        // input.addEventListener('keyup', function(e) {
        //     if (e.key == 'Enter') {
        //         let xml = new XMLHttpRequest()
        //         xml.onreadystatechange = function() {
        //             if (xml.readyState == 4 && (xml.status >= 200 && xml.status < 300)) {
        //                 let hero = JSON.parse(xml.responseText)
        //                 $('.showname')[0].innerHTML = hero.name
        //                 $('.name')[0].innerHTML = `名称：${hero.name}`
        //                 $('.title')[0].innerHTML = `外号：${hero.title}`
        //                 $('.story')[0].innerHTML = hero.story
        //                 $('.right')[0].style.backgroundImage = `url(${hero.bg})`
        //             }
        //         }
        //         xml.open('get', `https://autumnfish.cn/api/hero/info?name=${input.value}`)
        //         xml.send()
        //     }
        // })
        let input = document.querySelector('.hero')
        input.addEventListener('keyup', function(e) {
                if (e.key == 'Enter') {
                    let xhr = new XMLHttpRequest()
                    xhr.onreadystatechange = function() {
                            if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 300)) {
                                let hero = JSON.parse(xhr.responseText)
                                $('.showname')[0].innerHTML = hero.name
                                $('.name')[0].innerHTML = `名称：${hero.name}`
                                $('.title')[0].innerHTML = `称号：${hero.title}`
                                $('.story')[0].innerHTML = hero.story
                                $('.right')[0].style.backgroundImage = `url(${hero.bg})`
                            }
                        }
                        // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
                    xhr.open('get', `https://autumnfish.cn/api/hero/info?name=${input.value}`)
                    xhr.send()
                }
            })
            // let input = document.querySelector('.hero')
            // input.addEventListener('keyup', function (e) {
            //     if (e.key == 'Enter') {
            //         let xhr = new XMLHttpRequest()
            //         xhr.onreadystatechange = function () {
            //             if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 300)) {
            //                 let hero=JSON.parse(xhr.responseText)
            //                 $('')
            //             }
            //         }
            //     }
            // })
    </script>
</body>

</html>